<template>
    <div>
      用户名:
      <input type="text" v-model="form.name">
      <span :class="msgInfo.name === '校验成功' ? 'isGreen' : 'isRed' ">{{ msgInfo.name }}</span>
      <br>
      密码:
      <input type="password" v-model="form.password">
      <span :class="msgInfo.password === '成功' ? 'isGreen' :  'isRed'">{{ msgInfo.password}}</span>
      <br>
      再次输入密码:
      <input type="password" v-model="form.comPassword">
      <span :class="msgInfo.comPassword === '成功' ? 'isGreen' :  'isRed'">{{ msgInfo.comPassword}}</span>
      <br>
      <button @click="toSignUp">注册</button>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        form:{
          name: '',
          password: '',
          comPassword: ''
        },
        msgInfo:{
          name: '',
          password: '',
          comPassword: ''
        }
      }
    },
    watch:{
      'form.name'(newVal){
        this.msgInfo.name = /^[A-Z][A-Za-z0-9]{5,}$/.test(newVal) ? '校验成功': '校验失败:要求首字母大写,长度大于等于6'
      },
      'form.password'(newVal){
      this.msgInfo.password = /^[A-Z][A-Za-z0-9]{5,}$/.test(newVal) ? '成功': '校验失败:要求首字母大写,长度大于等于6'
    },
    'form.comPassword'(newVal){
      this.msgInfo.comPassword = this.form.password === newVal ? '校验成功' : '校验失败:两次输入不一致'
    },
    methods:{
      toSignUp(){
  
      }
    }
  }
  }
  </script>
  
  <style>
  .isRed{
    color: red;
  }
  .isGreen{
    color: green;
  }
  </style>